<template>
  <div class="condition">
    <el-page-header @back="goBack" content="内容管理" class="content-header">
    </el-page-header>
    <div class="item">
      <span class="title">状态:</span>
      <el-radio-group v-model="status">
        <el-radio :label="null">全部</el-radio>
        <el-radio :label="0">草稿</el-radio>
        <el-radio :label="1">待审核</el-radio>
        <el-radio :label="2">审核通过</el-radio>
        <el-radio :label="3">审核失败</el-radio>
        <el-radio :label="4">已删除</el-radio>
      </el-radio-group>
    </div>
    <div class="item">
      <span class="title">频道:</span>
      <el-select placeholder="请选择" v-model="channel_id">
        <el-option
          v-for="item in channels"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="item">
      <span class="title">日期:</span>
      <el-date-picker
        v-model="rangeDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
    </div>
    <div class="item">
      <el-button type="primary" @click="selectData(status, channel_id, rangeDate)">筛选</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      status: null,
      channel_id: null,
      rangeDate: [],
    };
  },
  props: {
    channels: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    selectData(status, channel_id, rangeDate) {
      this.$emit('select-data', status, channel_id, rangeDate);
    }
  },
};
</script>

<style scoped>
.condition {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 25px;
}

.content-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.item {
  padding: 15px;
}

.title {
  margin-right: 20px;
}
</style>
